<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
<c:if test="${sessionScope.loginMember == null }">
	<jsp:forward page="loginPage.sds"></jsp:forward>
</c:if>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>StepUp-Main</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

<!-- Morris -->
<link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>

<body class="fixed-navigation">
	<div id="wrapper">
		<!-- 사이드 메뉴바 -->
		<nav class="navbar-default navbar-static-side" role="navigation">
		<c:if test="${sessionScope.loginMember != null}">
			<div class="sidebar-collapse">
				<ul class="nav" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span>
								<c:if test="${sessionScope.loginMember.mimage == null}">
									<img alt="image" class="img-circle"
									src="imgUpload/anonymous.jpg" width="160px"/>
								</c:if>
								<c:if test="${sessionScope.loginMember.mimage != null}">
									<img alt="image" class="img-circle"
									src="imgUpload/${sessionScope.loginMember.mimage}" width="160px"/>
								</c:if>
							</span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<span class="clear"> <span class="block m-t-xs"> <strong
										class="font-bold">${sessionScope.loginMember.mname}</strong>
								</span> <span class="text-muted text-xs block">
									${sessionScope.loginMember.mposition}
								<b class="caret"></b>
								</span>
							</span>
							</a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="stepup_profile.sds">Profile</a></li>
								<li class="divider"></li>
								<li><a href="logout.sds">Logout</a></li>
							</ul>
						</div>
					</li>

					<!-- 메뉴 리스트 -->
					<li class="active"><a href="index.sds"><i
							class="fa fa-bar-chart-o"></i> <span class="nav-label">Statistics</span></a></li>
					<li><a href="stepup_rank.sds"><i class="fa fa-flask"></i>
							<span class="nav-label">Ranking</span></a></li>
					<li><a href="stepup_badge.sds"><i class="fa fa-desktop"></i>
							<span class="nav-label">Badge</span></a></li>
					<li><a href="stepup_mission.sds"><i
							class="fa fa-envelope"></i> <span class="nav-label">Mission</span></a></li>
					<li><a href="stepup_temp.sds"><i class="fa fa-sitemap"></i>
							<span class="nav-label">Thermometer</span></a></li>
					<li><a href="stepup_donation.sds"><i class="fa fa-globe"></i>
						<span class="nav-label">Donation</span></a></li>
				</ul>
			</div>
		</c:if>
		<c:if test="${sessionScope.loginMember == null }">
			<font size="20">
				비로그인시 출력화면
			</font>
		</c:if>
		</nav>

		<div id="page-wrapper" class="gray-bg">
			<!-- 상단 검색 및 로그아웃 메뉴 -->
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top white-bg" role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom" method="post"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="Search for something..."
									class="form-control" name="top-search" id="top-search">
							</div>
						</form>
					</div>
					<ul class="nav navbar-top-links navbar-right">
						
						<!-- 로그인 / 로그아웃 버튼 -->
						<c:if test="${sessionScope.loginMember == null}">
							<li><a href="loginPage.sds"> <i class="fa fa-sign-out"></i>
								Login
							</a></li>
							<li><a href="registerPage.sds"> <i class="fa fa-sign-out"></i>
								Register
							</a></li>
						</c:if>
						<c:if test="${sessionScope.loginMember != null}">
							<li><a href="stepup_profile.sds"><i class="fa fa-sign-out"></i>
								Profile
							</a></li>
							<li><a href="logout.sds"> <i class="fa fa-sign-out"></i>
								Logout
							</a></li>
						</c:if>
					</ul>
				</nav>
			</div>

			<!-- 차트 시작 -->
			<div class="wrapper wrapper-content animated fadeInRight">
				<c:if test="${sessionScope.loginMember == null }">
				<div class="row"
					style="margin-right: auto; margin-left: auto; width: 800px;">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-content ">
								<div class="carousel slide" id="carousel2">
									<ol class="carousel-indicators">
										<li data-slide-to="0" data-target="#carousel2" class="active"></li>
										<li data-slide-to="1" data-target="#carousel2"></li>
										<li data-slide-to="2" data-target="#carousel2" class=""></li>
									</ol>
									<div class="carousel-inner">
										<div class="item active">
											<img alt="image" class="img-responsive" src="img/p1.jpg"
												style="Height: 300px; width: 1000px">
											<div class="carousel-caption">
												<p>This is simple caption 1</p>
											</div>
										</div>
										<div class="item ">
											<img alt="image" class="img-responsive" src="img/p3.jpg"
												style="Height: 300px; width: 1000px">
											<div class="carousel-caption">
												<p>This is simple caption 2</p>
											</div>
										</div>
										<div class="item">
											<img alt="image" class="img-responsive" src="img/p2.jpg"
												style="Height: 300px; width: 1000px">
											<div class="carousel-caption">
												<p>This is simple caption 3</p>
											</div>
										</div>
									</div>
									<a data-slide="prev" href="#carousel2"
										class="left carousel-control"> <span class="icon-prev"></span>
									</a> <a data-slide="next" href="#carousel2"
										class="right carousel-control"> <span class="icon-next"></span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				</c:if>							
			
				<c:if test="${sessionScope.loginMember != null }">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-content">
								<div>
									<h1 class="m-b-xs" id="monthstep"></h1>
									<h3 class="font-bold no-margins">Stairs of Month</h3>
								</div>

								<div>
									<canvas id="lineChart" height="70"></canvas>
								</div>

								<div class="m-t-md">
									<small class="pull-right"> <i class="fa fa-clock-o">
									</i> Update on 08.01.2015
									</small> <small> <strong>Stairs of Month : </strong> 월별 걸어 올라간 계단의
										수를 보여줍니다.
									</small>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-primary pull-right">Today</span>
								<h5 id="nametoday"></h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins" id="showtoday"></h1>
								<div class="stat-percent font-bold text-navy" id="showdaykcal">
									 <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-info pull-right" >Monthly</span>
								<h5 id="showmonthname"></h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins" id="showmonth"></h1>
								<div class="stat-percent font-bold text-info" id="showmonthkcal">
									 <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-warning pull-right">Annual</span>
								<h5 id="nameyear"></h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins" id="showannual"></h1>
								<div class="stat-percent font-bold text-warning" id="showyearkcal">
									 <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
				</div>
				</c:if>
				
				<div class="row">
					<div class="col-lg-6">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>부서별 순위</h5>
								<div ibox-tools></div>
							</div>
							<div class="ibox-content">
								<div>
									<canvas id="doughnutChart" height="140" id="deptInfo"></canvas>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>개인별 순위</h5>
							</div>
							<div class="ibox-content">
								<table class="table">
									<thead>
										<tr>
											<th>#</th>
											<th>Name</th>
											<th>Position</th>
											<th>Dept Name</th>
											<th>Stairs</th>
										</tr>
									</thead>
									<tbody id="userInfo"></tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				
				
			</div>
			
			<!-- Footer 부분 -->
			<div class="footer">
				<div align="right">
						StepUp System. Copyright <strong> &copy; SHINHAN DATA SYSTEM.</strong> All Right Reserved. 2015.
					</div>
			</div>
			
		</div>
	</div>

	<!-- Mainly scripts -->
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

	<!-- Flot -->
	<script src="js/plugins/flot/jquery.flot.js"></script>
	<script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
	<script src="js/plugins/flot/jquery.flot.spline.js"></script>
	<script src="js/plugins/flot/jquery.flot.resize.js"></script>
	<script src="js/plugins/flot/jquery.flot.pie.js"></script>
	<script src="js/plugins/flot/jquery.flot.symbol.js"></script>
	<script src="js/plugins/flot/curvedLines.js"></script>

	<!-- Peity -->
	<script src="js/plugins/peity/jquery.peity.min.js"></script>
	<script src="js/demo/peity-demo.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="js/inspinia.js"></script>
	<script src="js/plugins/pace/pace.min.js"></script>

	<!-- jQuery UI -->
	<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>

	<!-- Jvectormap -->
	<script src="js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script src="js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

	<!-- Sparkline -->
	<script src="js/plugins/sparkline/jquery.sparkline.min.js"></script>

	<!-- Sparkline demo data  -->
	<script src="js/demo/sparkline-demo.js"></script>

	<!-- ChartJS-->
	<script src="js/plugins/chartJs/Chart.min.js"></script>
	<script>
		$(document)
				.ready(
						function() {

							var dnameAry = []; // 부서이름
							var dstairsAry = []; // 부서별 계단 수
							var stepAry = []; // 개인별 월별 계단수
							var monthAry = []; // 월
							var yearAry = []; // 년

							var i = 0;

							$.ajax({
								url : "stepup_main.sds",
								type : "post",
								async : false,
								dataType : "json",
								success : function(data) {
									// 상위 5개 개인별 계단 순위 가져오기
									$.each(data.getuserinfolist, function(
											index, item) {

										i = index + 1;
										
										$("#userInfo").append(
												"<tr>" + "<td>" + i + "</td>"
														+ "<td>" + item.mname
														+ "</td>" + "<td>"
														+ item.mposition
														+ "</td>" + "<td>"
														+ item.dname + "</td>"
														+ "<td>" + item.stairs
														+ "</td>" + "</tr>"
														+ "<tr>");
									});
									// 상위 3개 부서별 계단 순위 가져오기
									$.each(data.getdeptinfolist, function(
											index, item) {
										dnameAry[index] = item.dname;
										dstairsAry[index] = item.stairs;
									});
									
									// 개인별 계단 수 가져오기 : 월별
									$.each(data.monthstairlist, function(index,
											item) {
										monthAry[index] = item.stairdate;
										yearAry[index] = item.stairyear;
										stepAry[index] = item.stairs;
									});

									// 개인별 최근 계단 수 가져오기 : 1달만
									$("#monthstep").append(
											"20" + yearAry[0] + "년 "
													+ monthAry[0] + "월  Stairs : "
													+ stepAry[0]
									);
							
									// 개인 당일, 계단 수 , kcal 가져오기
									$("#showtoday").append(
											data.gettoday.stairs+" Stairs"
									);
									$("#nametoday").append(
											data.gettoday.stairmonth +"월 " + data.gettoday.stairday + "일"
									);
									$("#showdaykcal").append((data.gettoday.stairs)*4+" Kcal");
							
									// 개인 해당 월, 계단수, kcal 가져오기
									$("#showmonthname").append(
											monthAry[0]+ " 월"
									);
									$("#showmonth").append(
											stepAry[0]+ " Stairs"
									);
									$("#showmonthkcal").append(stepAry[0]*4+" Kcal");
									
									// 개인 현재 년도, 계단 수, kcal 가져오기
									$("#showannual").append(
											data.getyear.stairs+" Stairs"
									);
									$("#nameyear").append(
											"20" + data.getyear.stairyear + "년 "
									);
									$("#showyearkcal").append((data.getyear.stairs)*4+" Kcal");

								},
								error : function() {
									alert("실패 : " + data.status);
								}
							});
							
							var lineData = {
								labels : [ 
								        yearAry[0] + "/" + monthAry[0],
										yearAry[1] + "/" + monthAry[1],
										yearAry[2] + "/" + monthAry[2],
										yearAry[3] + "/" + monthAry[3],
										yearAry[4] + "/" + monthAry[4],
										yearAry[5] + "/" + monthAry[5],
										yearAry[6] + "/" + monthAry[6],
										yearAry[7] + "/" + monthAry[7],
										yearAry[8] + "/" + monthAry[8],
										yearAry[9] + "/" + monthAry[9],
										yearAry[10] + "/" + monthAry[10],
										yearAry[11] + "/" + monthAry[11] ],
								datasets : [
										{
											label : "Goal Stairs",
											fillColor : "rgba(220,220,220,0.5)",
											strokeColor : "rgba(220,220,220,1)",
											pointColor : "rgba(220,220,220,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(220,220,220,1)",
											data : [ stepAry[0] + 10,
													stepAry[1] + 10,
													stepAry[2] + 10,
													stepAry[3] + 10,
													stepAry[4] + 10,
													stepAry[5] + 10,
													stepAry[6] + 10,
													stepAry[7] + 10,
													stepAry[8] + 10,
													stepAry[9] + 10,
													stepAry[10] + 10,
													stepAry[11] + 10 ]
										},
										{
											label : "Success Stairs",
											fillColor : "rgba(26,179,148,0.5)",
											strokeColor : "rgba(26,179,148,0.7)",
											pointColor : "rgba(26,179,148,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(26,179,148,1)",
											data : [ stepAry[0], stepAry[1],
													stepAry[2], stepAry[3],
													stepAry[4], stepAry[5],
													stepAry[6], stepAry[7],
													stepAry[8], stepAry[9],
													stepAry[10], stepAry[11] ]
										} ]
							};

							var lineOptions = {
								scaleShowGridLines : true,
								scaleGridLineColor : "rgba(0,0,0,.05)",
								scaleGridLineWidth : 1,
								bezierCurve : true,
								bezierCurveTension : 0.4,
								pointDot : true,
								pointDotRadius : 4,
								pointDotStrokeWidth : 1,
								pointHitDetectionRadius : 20,
								datasetStroke : true,
								datasetStrokeWidth : 2,
								datasetFill : true,
								responsive : true,
							};
							
							var doughnutData = [ {
								value : dstairsAry[0],
								color : "#a3e1d4",
								highlight : "#1ab394",
								label : "[1등] " + dnameAry[0]
							}, {
								value : dstairsAry[1],
								color : "#dedede",
								highlight : "#1ab394",
								label : "[2등] " + dnameAry[1]
							}, {
								value : dstairsAry[2],
								color : "#b5b8cf",
								highlight : "#1ab394",
								label : "[3등] " + dnameAry[2]
							} ];

							var doughnutOptions = {
								segmentShowStroke : true,
								segmentStrokeColor : "#fff",
								segmentStrokeWidth : 2,
								percentageInnerCutout : 0, // This is 0 for Pie charts
								animationSteps : 100,
								animationEasing : "easeOutBounce",
								animateRotate : true,
								animateScale : false,
								responsive : true,
							};
							
							var ctx = document.getElementById("doughnutChart")
									.getContext("2d");
							var myNewChart = new Chart(ctx).Doughnut(
									doughnutData, doughnutOptions);
							
							var ctx = document.getElementById("lineChart")
									.getContext("2d");
							var myNewChart = new Chart(ctx).Line(lineData,
									lineOptions);

						});
	</script>

</body>
</html>
